<template>
	<div class="page">
		<p class="title">基本用法</p>
		<gr-badge>
			<div class="box"></div>
		</gr-badge>
		
		<p class="title">填充文本或数字</p>
		<gr-badge content="7">
			<div class="box"></div>
		</gr-badge>
		<gr-badge content="28">
			<div class="box"></div>
		</gr-badge>
		<gr-badge content="new">
			<div class="box"></div>
		</gr-badge>
		
		<p class="title">限制最大值</p>
		<gr-badge content="109" max="99">
			<div class="box"></div>
		</gr-badge>
		
		<gr-badge content="780" max="666">
			<div class="box"></div>
		</gr-badge>
		
		<p class="title">更改颜色</p>
		<gr-badge content="LOCK" color="#cfc123">
			<div class="box"></div>
		</gr-badge>
		<gr-badge color="#0055ff">
			<div class="box"></div>
		</gr-badge>
		
		
		
		<p class="title">自定义徽标内容</p>
		<gr-badge>
			<div class="box"></div>
			<template slot="content">
				<gr-icon name="select-bold" color="white" size="14px"></gr-icon>
			</template>
		</gr-badge>
		
		<gr-badge>
			<div class="box"></div>
			<template slot="content">
				<gr-icon name="select-bold" color="white" size="22px"></gr-icon>
			</template>
		</gr-badge>
		
		<gr-badge>
			<div class="box"></div>
			<template slot="content">
				AAAA
			</template>
		</gr-badge>
		
		
		<p class="title">隐藏</p>
		<gr-badge hidden>
			<div class="box"></div>
		</gr-badge>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		mounted() {
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 10px;
		.box {
			width: 60px; height: 60px;
			background-color: #ccc;
			border-radius: 3px;
			margin-left: 20px;
		}
	}
</style>
